Azure Static Web Appsでパスワード保護が出来るようになりました

いわさです。

Azure Static Web Appsは静的サイトホスティングに特化したAzureのマネージドサービスです。
本日より、デプロイしたサイトをパスワードで保護出来るようになりました。

これは最高ですね。早速使ってみました。

本機能は投稿日時点でパブリックプレビュー機能です。
プレビュー機能利用時の使用条件や注意事項はこちらをご確認ください。

静的Webアプリの作成

静的Webアプリの作成方法は以前記事にさせて頂いたものをそのまま使いたいと思います。

ポイントとして、ホスティングプランはStandardを選択する必要があります。
後述しますが、Freeプランではパスワード保護機能は利用出来ません。

GitHub Actionsのワークフローが完了したらサイトへアクセスしてみましょう。
いつ使ってもはやい。

パスワード保護

パスワード保護機能はデプロイ後の「構成」メニューから設定する形となります。
オプションとしては、無効、ステージング環境のみを保護、ステージングと運用の両方の環境を保護の３つがあります。

ステージング機能については冒頭のStatic Appsの記事で少し触れているのでそちらをご確認ください。

また、パスワードルールは決まっています。

Visitor password is required. The password should be at least eight characters long and must contain capital letters, lowercase letters, numbers, and symbols. Key Vault references are not currently supported.

• 8文字以上
• 大文字、小文字、数字、記号を含む

パスワード保護機能を有効化した状態でサイトへアクセスすると認証ページへリダイレクトされます。
ベーシック認証のようなダイアログではなく専用の認証ページが表示されます。

正しいパスワードを入力後、本来のページへ遷移することが出来ます。

なお、以下のようにセッションベースで認証しているようなので、一度認証後はクッキーが生きてる限りは再認証は不要です。

Freeプランでは利用不可

念の為確認してみましたが、Freeプランの場合はパスワード保護機能が非活性になって利用出来ません。

Freeプランは無料で、Standardプランになると料金が発生しますが、それでもStatic Web Appsは運用しやすい価格だと思いますのでぜひご検討ください。

Static Web Apps | Microsoft Azure

さいごに

よりセキュアにしたい場合はIP制限やプライベートエンドポイントを使って利用者を制限する方法がありますのでこちらもご検討ください。

Static Web Appsの利用者はシンプルな静的サイトかSPAのどちらかなイメージですが前者の場合だとライトにパスワード認証したいというニーズは未だに多いんじゃないかなと思っているので、この機能は嬉しいですね。
また、本番とステージング両方を公開して、ステージング環境のみアクセス制限したいというケースも多いのでこの機能最高なのではと個人的には思いました。